<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姚德秋">
    <title></title>
    <style>
    div{
        width: 200px;
        margin: 50px auto;
        border: 2px solid red;
        text-align: center;
        padding: 20px;
    }
    a{
        background-color: green;
    }
    </style>
</head>
<body>
     <div>
         <a href="http://www.baidu.com" target="_bslnk">百度一下
        </a>
     </div>
</body>
</html>
<script>
    document.body.addEventListener('click',function (){
        alert('body-捕获');
    } ,true);

     document.body.addEventListener('click',function (){
        alert('body-冒泡');
    } ,false);

    document.querySelector('div').addEventListener('click',function(){
           alert('div-捕获1');
        //    Propagation传播
        // 停止事件传播 但是不会阻止同级别
        //    ev.stopPropagation();
        // Immediate立即
        
        ev.stopImmediatePropagation

    },true);
       document.querySelector('div').addEventListener('click',function(){
           alert('div-捕获2');
        //    Propagation传播
        // 停止事件传播
           ev.stopPropagation();

    },true);
     document.querySelector('div').addEventListener('click',function(){
           alert('div-冒泡');
    },false);
    document.querySelector('a').addEventListener('click',function(ev){
           alert('a-捕获');
        //    <a href="http://www.baidu.com" target="_bslnk">百度一下</a>

        //    阻止事件默认行为
        ev.preventDefault();
        // 获取是否阻止了默认事件
        alert(ev.defaultPrevented)

    },true);
     document.querySelector('a').addEventListener('click',function(){
           alert('a-冒泡');
    },false);
   
    document.querySelector('div').onclick = function(){
        alert('开始执行a点击事件');
    }
    // 子元素的事件会冒泡到父元素
    document.querySelector('a').onclick = function(){
        alert('a点击');
    }


</script>